<template>
  <div>
    <!-- 视功能(牛眼) -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>
    <table class="region_data">
      <thead>
        <tr>
          <th class="title_bg w-[25%]" :colspan="2">检查项目</th>
          <th class="title_bg w-[50%]" :colspan="4">检查结果</th>
          <th class="title_bg w-[25%]" :colspan="2">参考值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th :colspan="2">远用沃式4点</th>
          <td :colspan="4">
            {{ data_form.worh4result ? data_form.worh4result : "---" }}
          </td>
          <td :colspan="2" class="close_cursor">4</td>
        </tr>
        <tr>
          <th :colspan="2">立体视</th>
          <td :colspan="4">---</td>
          <td :colspan="2" class="close_cursor">上单下单</td>
        </tr>
        <tr>
          <th :colspan="2" :rowspan="2">隐斜Von Graefe(远)</th>
          <th class="close_cursor">BI</th>
          <td :colspan="3">---</td>
          <td :colspan="2" :rowspan="2" class="close_cursor">-1Δ ± 2Δ : X</td>
        </tr>
        <tr>
          <th class="close_cursor">BU</th>
          <td :colspan="3">---</td>
        </tr>
        <tr>
          <th :colspan="2" :rowspan="2">隐斜Von Graefe(近)</th>
          <th class="close_cursor">BI</th>
          <td :colspan="3">---</td>
          <td :colspan="2" :rowspan="2" class="close_cursor">-1Δ ± 2Δ : X</td>
        </tr>
        <tr>
          <th class="close_cursor">BU</th>
          <td :colspan="3">---</td>
        </tr>
        <tr>
          <th :colspan="2" :rowspan="2">正负融像(远)</th>
          <th class="close_cursor">BI</th>
          <td>---</td>
          <td>---</td>
          <td>---</td>
          <td :colspan="2" class="close_cursor">X : 7 ± 3 : 4 ± 2</td>
        </tr>
        <tr>
          <th class="close_cursor">BO</th>
          <td>---</td>
          <td>---</td>
          <td>---</td>
          <td :colspan="2" class="close_cursor">9±4 : 19±8 : 10±4</td>
        </tr>
        <tr>
          <th :colspan="2" :rowspan="2">正负融像(近)</th>
          <th class="close_cursor">BI</th>
          <td>---</td>
          <td>---</td>
          <td>---</td>
          <td :colspan="2" class="close_cursor">13 ± 4 :21 ± 4 : 13 ± 5</td>
        </tr>
        <tr>
          <th class="close_cursor">BO</th>
          <td>---</td>
          <td>---</td>
          <td>---</td>
          <td :colspan="2" class="close_cursor">17 ± 5 : 21 ± 6 : 11 ± 7</td>
        </tr>
        <tr>
          <th :colspan="2">AC/A(梯度法)</th>
          <td :colspan="4">---</td>
          <td :colspan="2" class="close_cursor">4Δ/D ± 1Δ/D</td>
        </tr>
        <tr>
          <th :colspan="2">负相对调节NRA</th>
          <td :colspan="4">---</td>
          <td :colspan="2" class="close_cursor">+2.00D ± 0.50D</td>
        </tr>
        <tr>
          <th :colspan="2">正相对调节NRA</th>
          <td :colspan="4">---</td>
          <td :colspan="2" class="close_cursor">-2.50D ± 1.00D</td>
        </tr>
        <tr>
          <th :colspan="2">调节反应BCC</th>
          <td :colspan="4">---</td>
          <td :colspan="2" class="close_cursor">+0.50D ± 0.25D</td>
        </tr>
        <tr>
          <th :colspan="2" :rowspan="3">节幅度AMP(负镜片法)</th>
          <th>右眼(R)</th>
          <td :colspan="3">005D</td>
          <th :rowspan="3">正常值范围:>15-0.25x年龄(测量距离40cm)</th>
        </tr>
        <tr>
          <th>双眼(D)</th>
          <td :colspan="3">005D</td>
        </tr>
        <tr>
          <th>左眼(L)</th>
          <td :colspan="3">005D</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {
  // console.log(props);
});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
  visual_function_niu_data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const data_form = ref({}); // 数据

// 双击聚焦
const handleDbClickFocus = (ElementName) => {
  return;
  emit("handleDbClickFocus", ElementName);
  nextTick(() => {
    // 添加nextTick确保DOM更新后执行
    document.querySelector(`input[data-field="${ElementName}"]`)?.focus();
  });
};

// 失去焦点
const handleDbClickBlur = () => {
  emit("handleDbClickBlur", props.regionId);
};

watchEffect(() => {
  data_form.value = props.visual_function_niu_data || {};
});
</script>

<style scoped lang="scss">
.region_data {
  .close_cursor {
    &:hover {
      cursor: default;
      color: black;
    }
  }
}
</style>